import { useEffect } from 'react';
import { Button, DatePicker, Form, Input, InputNumber, Radio, Select, Space } from 'antd';
import { useModel } from '@umijs/max'
import { CouponCutType, CouponInfoType, addCouponTemplate } from './services'
import { useRequest } from 'ahooks'
import { enum2options } from '@/utils/enum2options';
import UseRange from './components/UseRange';

const CouponEditPage: React.FC = () => {
  const [editForm] = Form.useForm()
  const { runAsync, loading } = useRequest(addCouponTemplate, {manual: true})
  const { closeCurrentTab } = useModel('global')

  const onFinish = (formValues: any) => {
    runAsync({
      title: formValues.title,
      infoType: formValues.infoType,
      cutType: formValues.cutType,
      cutNum: formValues.cutNum,
      expireDay: formValues.expireDay,
      fullMoney: formValues.fullMoney,
      endTime: formValues.endTime.format('YYYY-MM-DD 23:59:59'),
      stationIds: formValues.stationIds?.map((it: any) => it.id),
      num: formValues.num,
    })
    .then(() => {
      const event = new CustomEvent('refreshCouponList')
      window.dispatchEvent(event)
      closeCurrentTab('/coupon/couponList')
    })
  }

  useEffect(() => {
    editForm.setFieldsValue({
      title: undefined,
      infoType: CouponInfoType.折扣券,
      cutType: CouponCutType.总费用,
      cutNum: undefined,
      expireDay: undefined,
      fullMoney: undefined,
      endTime: undefined,
      num: undefined,
      stationIds: undefined,
    })
  }, [])
  
  return (
    <div className='container'>
      <div className="card">
        <Form form={editForm} name='editForm' labelCol={{flex: '120px'}} onFinish={onFinish}>
          <Form.Item name='title' label='优惠券名称' rules={[{required: true, message: '请输入优惠券名称'}]}>
            <Input placeholder='请输入' style={{width: 320}} />
          </Form.Item>
          <Form.Item name='infoType' label='优惠券类型' rules={[{required: true, message: '请选择优惠券类型'}]}>
            <Select placeholder='请选择' options={enum2options(CouponInfoType)}  style={{width: 320}} />
          </Form.Item>
          <Form.Item name='cutType' label='优惠项目' rules={[{required: true, message: '请选择优惠项目'}]}>
            <Radio.Group options={enum2options(CouponCutType)} />
          </Form.Item>
          <Form.Item dependencies={['infoType']} noStyle>
            {
              ({getFieldValue}) => {
                const infoType = getFieldValue('infoType')
                const isDiscount = infoType === CouponInfoType.折扣券
                let label = '折扣值', desc = '折，只允许保留1位小数'
                if (infoType === CouponInfoType.抵用券) {
                  label = '抵扣金额'
                  desc= '元'
                }
                return <>
                  <Form.Item label={label} required>
                    <Space>
                      <Form.Item name='cutNum' rules={[{required: true, message: `请输入${label}`}]} noStyle>
                        <InputNumber placeholder='请输入' style={{width: 320}} precision={isDiscount ? 1 : 2} min={isDiscount ? 1 : 0} max={isDiscount ? 9.9 : undefined} />
                      </Form.Item>
                      <span>{desc}</span>
                    </Space>
                  </Form.Item>
                  {
                    infoType === CouponInfoType.抵用券 && <Form.Item label='满足金额' required>
                      <Space>
                        <Form.Item name='fullMoney' rules={[{required: true, message: `请输入满足金额`}]} noStyle>
                          <InputNumber placeholder='请输入' style={{width: 320}} precision={1} min={0} />
                        </Form.Item>
                        <span>元，0元代表无门槛</span>
                      </Space>
                    </Form.Item>
                  }
                </>
              }
            }
          </Form.Item>
          <Form.Item name='expireDay' label='有效天数' rules={[{required: true, message: '请输入有效天数'}]}>
            <InputNumber placeholder='请输入' style={{width: 320}} min={1} />
          </Form.Item>
          <Form.Item name='endTime' label='领取截止日期' rules={[{required: true, message: '请选择领取截止日期'}]}>
            <DatePicker placeholder='请输入' style={{width: 320}} />
          </Form.Item>
          <Form.Item name='num' label='发放数量'>
            <InputNumber placeholder='最大 10,000,000' style={{width: 320}} min={0} max={10000000} precision={0} />
          </Form.Item>
          <Form.Item name='stationIds' label='使用范围'>
            <UseRange style={{width: 500}} />
          </Form.Item>
          <Form.Item label=' ' colon={false}>
            <Button type='primary' htmlType='submit' loading={loading}>提交</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default CouponEditPage;
